<!--
  功能：这是角色页面
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月20日 14:34:19
-->
<template>
  <div>
    <div class="search">
      <a-space>
        <a-input v-model:value="search.name" placeholder="名称检索" />
        <a-button type="primary" @click="serch">
          <template #icon>
            <search-outlined />
          </template>
          检索
        </a-button>
      </a-space>
    </div>
    <div class="crud">
      <a-space>
        <a-button type="primary" @click="insert">
          <template #icon>
            <plus-outlined />
          </template>
          创建
        </a-button>
        <a-button type="primary" @click="update">
          <template #icon>
            <edit-outlined />
          </template>
          编辑
        </a-button>
        <a-button type="primary" danger @click="del">
          <template #icon>
            <delete-outlined />
          </template>
          删除
        </a-button>
      </a-space>
    </div>

    <a-table bordered rowKey="id" :columns="columns" :data-source="tableData" :pagination="false" :row-selection="{ selectedRowKeys: form.selectedRowKeys, onChange: onSelectChange}"
             :scroll="{ y: 600 }">
      <template #bodyCell="{ column,text, record }">
        <template v-if="column.key === 'name'">
          <template v-if="$isNewDataByTime(record.updateTime)">
            <alert-filled :style="{ color: '#eb2f96' }" /> <span :style="{ color: '#eb2f96' }">{{text}}</span>
          </template>
        </template>
        <template v-else-if="column.key === 'icon'">
          <component :is="text" style="font-size: 20px;" />
        </template>
        <template v-else-if="column.key === 'type'">
          <a-space v-if="text=='folder'">
            <FolderOpenOutlined style="font-size: 20px; color: #d29200;" />
            <span>文件夹</span>
          </a-space>
          <a-space v-if="text=='menu'">
            <AppstoreOutlined style="font-size: 20px; color: #2b88d8;" />
            <span>菜单项</span>
          </a-space>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" @click="updateRow(record)">
              <template #icon>
                <edit-outlined />
              </template>
              编辑
            </a-button>
            <a-button type="primary" danger @click="delRow(record)">
              <template #icon>
                <delete-outlined />
              </template>
              删除
            </a-button>
          </a-space>
        </template>
        <template v-else>
          <span>{{text}}</span>
        </template>
      </template>
    </a-table>

    <a-modal :open="form.visible" :title="form.type=='insert'?'创建部门信息':'编辑部门信息' " @change="form.visible = false" :footer="null" destroyOnClose>
      <formModel :row="form.row" :type="form.type" @success="successForm" />
    </a-modal>
  </div>
</template>

<script>
import { PlusOutlined, AlertFilled, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { tree, remove } from '@/api/sysMenuApi'
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import {} from 'vue-router'
import {} from 'vuex'
import formModel from './formModel.vue'
import { message } from 'ant-design-vue'
export default defineComponent({
  name: 'sysRole',
  props: {},
  emits: [],
  setup(props, context) {
    const columns = [
      {
        title: '菜单名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '菜单类型',
        dataIndex: 'type',
        key: 'type'
      },
      {
        title: '访问地址',
        dataIndex: 'path',
        key: 'path'
      },
      {
        title: '图标',
        dataIndex: 'icon',
        key: 'icon'
      },
      {
        title: '组件名称',
        dataIndex: 'componentName',
        key: 'componentName'
      },
      {
        title: '重定向',
        dataIndex: 'redirect',
        key: 'redirect'
      },
      {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort'
      },
      {
        title: '最后修改时间',
        dataIndex: 'updateTime',
        key: 'updateTime'
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 200,
        fixed: 'right'
      }
    ]

    const search = {
      name: ''
    }

    const data = reactive({
      columns,
      search,
      tableData: null,
      form: {
        selectedRowKeys: [],
        selectedRows: [],
        row: null,
        type: 'insert',
        visible: false
      }
    }) //里面写所有的响应式数据，像vue2中的data一样

    // 初始化表格列表
    let initPageList = () => {
      let params = {
        name: search.name
      }
      tree(params).then(resd => {
        data.tableData = resd
      })
    }
    /* 创建全选 */
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      data.form.selectedRowKeys = selectedRowKeys
      data.form.selectedRows = selectedRows
    }
    /* 创建数据 */
    let insert = () => {
      data.form.visible = true
      data.form.type = 'insert'
    }
    /* 更新数据 */
    let update = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length != 1) {
        message.warning('编辑操作有且只有选择一行数据')
        return false
      }
      data.form.row = data.form.selectedRows[0]
      data.form.visible = true
      data.form.type = 'update'
    }
    /* 更新行数据 */
    let updateRow = row => {
      data.form.row = row
      data.form.visible = true
      data.form.type = 'update'
    }
    /*删除数据 */
    let del = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length == 0) {
        message.warning('删除操作至少选择一行数据')
        return false
      }
      let params = data.form.selectedRowKeys
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`)
        initPageList()
      })
    }
    /*删除行数据 */
    let delRow = row => {
      let params = [row.id]
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`)
        initPageList()
      })
    }
    // 表单成功回调函数
    let successForm = () => {
      initPageList()
      data.form.visible = false
    }

    // 检索
    let serch = () => {
      initPageList()
    }
    // 页面初始化
    onMounted(() => {
      initPageList() // 初始化表格
    })

    return {
      ...toRefs(data),
      onSelectChange,
      insert,
      update,
      updateRow,
      del,
      delRow,
      successForm,
      serch
    }
  },
  components: {
    PlusOutlined,
    formModel,
    AlertFilled,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined
  }
})
</script>

<style scoped>
.crud,
.search {
  margin-bottom: 10px;
}
</style>